<!-- 代回款弹窗 -->
<template>
  <div class='payment_task_modal'>
    <Row :gutter="16" type="flex" justify="center" v-if="payment.remark">
      <Col span="20" class="tips">
      <Icon type="md-alert" class="tips_icon" />
      {{payment.remark}}
      </Col>
    </Row>
    <Form ref="formValidatePaymentTaskModal" :label-width="170">
      <Row :gutter="16">
        <Col span="12">
        <FormItem label="计划回款日期：">
          {{payment.planTime||'-'}}
        </FormItem>
        </Col>
        <Col span="12">
        <FormItem label="计划回款金额：">
          {{payment.planMoney||'-'}}
        </FormItem>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="12">
        <FormItem label="回款类型：">
          {{payment.receiptTypeStr||'-'}}
        </FormItem>
        </Col>
        <Col span="12">
        <FormItem label="对应合同约定回款金额：">
          {{payment.agreementMoney||'-'}}
        </FormItem>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="12">
        <FormItem label="签约房源：">
          {{payment.roomName||'-'}}
        </FormItem>
        </Col>
        <Col span="12">
        <FormItem label="面积：">
          {{payment.area||'-'}}
        </FormItem>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="12">
        <FormItem label="客户姓名：">
          {{payment.customerName||'-'}}
        </FormItem>
        </Col>
        <Col span="12">
        <FormItem label="归属顾问：">
          {{payment.counselorName||'-'}}
        </FormItem>
        </Col>
      </Row>
      <Row :gutter="16" type="flex" justify="center">
        <Col span="20" class="tips line_h50 entry_date">
        <FormItem label="回款入账日期：" prop="creditDate">
          <DatePicker type="date" :options="Approach" v-model="payment.creditDate"
            :clearable='false' @on-change='payment.creditDate = $event' format="yyyy-MM-dd">
          </DatePicker>
        </FormItem>
        </Col>
      </Row>
    </Form>
    <Row :gutter="16" type="flex" justify="center" v-if="payment.hint">
      <Col span="20" class="tips line_h50">
      {{payment.hint}}
      </Col>
    </Row>
    <div class="flex flex-horizontal-end btn-operate">
      <Button @click="handleClose">取消回款</Button>
      <Button type="primary" :loading="loading" @click="submitFun()"
        style="margin-left: 8px">确定</Button>
    </div>
  </div>
</template>
<script>
  import paymentMgr from '@/biz/paymenManage/paymentTask'
  import moment from 'moment'
  export default {
    components: {},
    data() {
      return {
        payment: {},
        loading: false,
        Approach: {
          disabledDate(date) {
            return date && date.valueOf() > Date.now()
          },
        },
      }
    },
    props: ['taskPrimaryKey'],
    computed: {},
    watch: {},
    methods: {
      handleClose() {
        this.$emit('onClose')
      },
      submitFun() {
        console.log('确定')
        let that = this
        this.$Modal.confirm({
          title: '回款确认',
          content: `您将代顾问 ${that.payment.counselorName} 回款 <span style="color:red;font-weight: 600;font-size:17px">${that.payment.pendingPaymentMoney}元</span>，回款后无需审核直接入账。请确认是否立即回款？`,
          okText: '确定',
          cancelText: '取消回款',
          onOk: () => {
            this.loading = true
            let params = {
              repaymentPlanId: this.payment.repaymentPlanId,
              taskPrimaryKey: this.payment.taskPrimaryKey,
              pendingPaymentMoney: this.payment.pendingPaymentMoney,
              creditDate: moment(this.payment.creditDate).format('YYYY-MM-DD')
            }
            paymentMgr
              .enterPaymentWeb(params)
              .then((res) => {
                this.loading = false
                that.$Message.success('回款成功!')
                that.AddModal = false
                that.$emit('onChangeTable')
                that.$emit('onClose')
              })
              .catch((err) => {
                that.$emit('onClose')
                this.loading = false
              })
          },
          onCancel: () => {},
        })
      },
      initdetails() {
        let params = {
          taskPrimaryKey: this.taskPrimaryKey,
        }
        paymentMgr.selectRepaymentPlanDetailsWeb(params).then((res) => {
          console.log(res)
          this.payment = { ...res, creditDate: moment(new Date()).format('YYYY-MM-DD') }
        })
      },
    },
    mounted() {
      this.initdetails()
    },
  }
</script>
<style lang='scss' scoped>
  .payment_task_modal {
    .tips {
      text-align: center;
      margin-bottom: 15px;
      background-color: rgba(254, 252, 236, 1);
      width: auto;
      line-height: 32px;

      .tips_icon {
        font-size: 20px;
        color: #0f42a7;
      }

      .AssignCustomers_name {
        margin-left: 10px;
        cursor: pointer;
        color: #0f42a7;
      }
    }

    .line_h50 {
      line-height: 50px;
    }

    .entry_date {
      margin-bottom: 20px;
      height: 50px;
      padding-top: 8px;
    }
  }
</style>